<template>
    <div id="owlclassfly">
      <div class="item" @click="select(0)">
        <img :class="['img','a'+styleindex]" src="../../assets/photo.png"/>
        <p>照片</p>
      </div>
      <div class="item" @click="select(1)">
        <img :class="['img2','b'+styleindex]" src="../../assets/article.png"/>
        <p>文章</p>
      </div>
      <div class="item" @click="select(2)">
        <img :class="['img3','c'+styleindex]" src="../../assets/icon-test.png"/>
        <p>纸箱</p>
      </div>
      <div class="item" @click="select(3)">
        <img :class="['img2','d'+styleindex]" src="../../assets/liuyan.png"/>
        <p>留言</p>
      </div>
    </div>
</template>

<script>
    export default {
        name: "owlClassfly",
      data(){


          return{

            styleindex:0,


          }
      },
      methods:{


          select(index){

            this.styleindex=index;

            switch (index) {

              case 0:
                    this.$router.push("/");
                    break;
              case 1:
                    this.$router.push("/article");
                    break;
              case  2:
                    this.$router.push("/oldbox");
                    break;
              case 3:
                    this.$router.push("/leave");
                    break;
              default:
                   break;


            }

          }

      }
    }
</script>

<style scoped>


  #owlclassfly{

    width: 100%;
    height: 60px;
    /*background-color: black;*/
    display: flex;
    padding-top: 12px;
  }

  .item:first-child{

    margin-left: 6%;
  }
  .item{

    width: 22%;
    height: 100%;
    /*background-color: yellowgreen;*/

  }

   .img{
    width: 20px;
    height: 20px;
     opacity: 0.5;

  }
  .img2{

    width: 20px;
    height:18px ;
    opacity: 0.5;
  }
  .item p{
    color: white;
    font-size: 13px;

  }

  .img3{

    width: 24px;
    opacity: 0.5;
    /*margin-top: -4px;*/
    /*height:36px ;*/
  }

  .a0{

    opacity: 1;
  }

  .b1{

    opacity: 1;
  }
  .c2{

    opacity: 1;
  }

  .d3{

    opacity: 1;
  }
</style>
